<!-- 配料投料-详情 -->


<template>
    <view class="container">
        <!-- 顶部标题 -->
        <TopBar title="配料投料-详情"></TopBar>

        <scroll-view scroll-top="0" scroll-y="true" class="scroll-Y"
            style="height: 300px; background-color: antiquewhite;padding: 10px 20px;width: 90%;">
            <view class="scroll-Y-content">
                <view class="scroll-Y-content-title-left">
                    配料单号:
                </view>
                <view class="scroll-Y-content-title-right">
                    1443213
                </view>
            </view>
            <view class="scroll-Y-content">
                <view class="scroll-Y-content-title-left">
                    配料单号:
                </view>
                <view class="scroll-Y-content-title-right">
                    1443213
                </view>
            </view>
            <view class="scroll-Y-content">
                <view class="scroll-Y-content-title-left">
                    配料单号:
                </view>
                <view class="scroll-Y-content-title-right">
                    1443213
                </view>
            </view>
            <view class="scroll-Y-content">
                <view class="scroll-Y-content-title-left">
                    配料单号:
                </view>
                <view class="scroll-Y-content-title-right">
                    1443213
                </view>
            </view>
            <view class="scroll-Y-content">
                <view class="scroll-Y-content-title-left">
                    配料单号:
                </view>
                <view class="scroll-Y-content-title-right">
                    1443213
                </view>
            </view>
            <view class="scroll-Y-content">
                <view class="scroll-Y-content-title-left">
                    配料单号:
                </view>
                <view class="scroll-Y-content-title-right">
                    1443213
                </view>
            </view>
            <view class="scroll-Y-content">
                <view class="scroll-Y-content-title-left">
                    配料单号:
                </view>
                <view class="scroll-Y-content-title-right">
                    1443213
                </view>
            </view>
            <view class="scroll-Y-content">
                <view class="scroll-Y-content-title-left">
                    配料单号:
                </view>
                <view class="scroll-Y-content-title-right">
                    1443213
                </view>
            </view>
            <view class="scroll-Y-content">
                <view class="scroll-Y-content-title-left">
                    配料单号:
                </view>
                <view class="scroll-Y-content-title-right">
                    1443213
                </view>
            </view>
            <view class="scroll-Y-content">

                <view class="scroll-Y-content-title-right">
                    1443213
                </view>
            </view>
        </scroll-view>
        <view class="bottom-buttom">
            
            <button @click="confirmbutton">确定</button>
            <button >明细</button>
            <button>刷新</button>
        </view>
    </view>
</template>
<script setup lang="ts">
// 这里可以编写组件的逻辑代码
import { ref } from 'vue'

// 示例响应式数据
const message = ref('配料投料-详情')
const confirmbutton = () => {
    uni.navigateTo({
        url: '/pages/WorkShop/MateriaThrow/MateriaThrowThrow'
    });
}
</script>
<style scoped>
/* 这里可以编写组件的样式 */
.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    /* justify-content: center; */
    min-height: 500px;
    overflow: hidden;
    /* 3. 隐藏容器溢出内容 */
    background-color: #F7F3F1;
    /* background-image: url("/src/static/log/Loginbg3.png"); */
    background-size: 100% 100%;
}

/* 滑动区域内-行的样式 */
.scroll-Y-content {
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #aeaba9;

}

/* 滑动区域内-行的样式-左边 */
.scroll-Y-content-title-left {
    padding-right: 10px;

}

/* 滑动区域内-行的样式-右边 */
.scroll-Y-content-title-right {
    padding-right: 10px;
    color: blue;
}

/* 底部三个按钮 */
.bottom-buttom{
width: 100%;
padding: 10px;
    display: flex;
    align-items: center;
    /* // 使底部按钮在水平方向上均匀分布，按钮之间的间距相等 */
    justify-content: space-between;
}
</style>
